<template>
  <header>
    <nav>
      <HeadComp :detailFlag="detailFlag" :cityInfo="currentCityInfo" :saveCityInfo="saveCityInfo"/>
    </nav>
  </header>
  <section class="fullWidthSection" v-if="!detailFlag">
    <p>你正在预览{{ detailWeatherInfo.detailCity }}的天气信息，可以通过右上角的"+"号按钮保存起来</p>
  </section>
  <div class="mainBox">
    <SearchInput v-show="detailFlag" @update:address="handleAddressChange"/>
    <CityList v-if="detailFlag" v-show="cityListVisible"/>
    <CityDetail :detailWeatherInfo="detailWeatherInfo" v-else/>
    <h2>近期天气</h2>
    <WeatherChart v-if="detailCode" :detailCode="detailCode"/>
  </div>
</template>

<script setup>
import SearchInput from './SearchInput.vue'
import CityList from './CityList.vue'
import WeatherChart from './WeatherChart.vue'
import {ref, defineProps, onMounted, watch} from 'vue'
import CityDetail from "@/components/CityDetail.vue";
import HeadComp from "@/components/HeadComp.vue";
import {getAdcodeByCity, getCityByIp, getWeatherByAdcode, getWeatherForecastByAdcode} from "@/api/index.js";


const cityInfo = ref({})
const weatherList = ref([])
const cityListVisible = ref(true)  // 控制 CityList 显示或隐藏
const detailCode = ref('') // 搜索框的值
const currentCityInfo = ref({}) // 新增：当前城市信息
const saveCityInfo = ref({}) // 新增：保存的城市信息
//城市 气温 天气 风向 风力
const detailWeatherInfo = ref({
  detailCity: '',
  detailTemperature: '',
  detailWeather: '',
  detailWindDirection: '',
  detailWindPower: ''
})

const props = defineProps({
  detailFlag: {
    type: Boolean,
    default: true
  },
  detailAdcode: {
    type: String,
    default: ''
  }
})

const handleAddressChange = (address) => {
  if (address.trim()) {
    cityListVisible.value = false // 显示 CityList
  } else {
    cityListVisible.value = true // 隐藏 CityList
  }
}

// 修改 watch 的实现
watch(() => props.detailAdcode, async (newVal, oldVal) => {
  console.log('MainComp新旧值:', {newVal, oldVal})
  if (newVal && newVal.toString().trim()) {
    console.log("detailAdcode发生了改变:", newVal)
    let weather = await getWeatherByAdcode(newVal);
    //整合详情数据
    debugger
    detailWeatherInfo.value.detailCity = weather.lives[0].city
    detailWeatherInfo.value.detailTemperature = weather.lives[0].temperature
    detailWeatherInfo.value.detailWeather = weather.lives[0].weather
    detailWeatherInfo.value.detailWindDirection = weather.lives[0].winddirection
    detailWeatherInfo.value.detailWindPower = weather.lives[0].windpower
    detailCode.value = weather.lives[0].adcode

    // 更新当前城市信息
    saveCityInfo.value = {
      adcode: weather.lives[0].adcode,
      city: weather.lives[0].city,
      weather: weather.lives[0]
    }
  }
}, {immediate: true})

onMounted(async () => {
  //获取当前ip城市天气
  let res = await getCityByIp();
  //获取当前城市天气详情
  let weather = await getWeatherByAdcode(res.adcode);
  //获取当前城市天气预报
  let forecastData = await getWeatherForecastByAdcode(res.adcode);
  //整合数据
  cityInfo.value = res
  cityInfo.value.weather = weather.lives[0]
  weatherList.value = forecastData.forecasts[0].casts
  detailCode.value = res.adcode

  // 初始化当前城市信息
  currentCityInfo.value = {
    adcode: res.adcode,
    city: res.city,
    weather: weather.lives[0]
  }
})

</script>

<style scoped>
.mainBox {
  width: 60%;
  margin: 0 auto;
  padding: 1.5rem 10rem;
  box-sizing: border-box;
}

h2 {
  margin-top: 1.5rem;
  color: white;
  font-size: 16px;
  font-weight: 400;
  font-family: "Microsoft YaHei", sans-serif;
}

.fullWidthSection {
  width: 100%;
  background-color: rgb(0 78 113 / 1);
  padding: 8px;
  color: white;
  height: 40px;
  text-align: center;
}
</style>
